<template>
  <div class="page-view">
    <div class="top">
      <form action="/">
        <van-search
          ref="searchInput"
          v-model="value"
          background="#FFF"
          placeholder="搜索感兴趣班级"
          shape="round"
          class="search"
          @focus="clearList"
          @search="onSearch"
        >
          <div
            slot="left-icon"
          >
            <img
              src="~assets/class/search-icon.png"
              class="search-icon"
            >
          </div>
        </van-search>
      </form>
      <div
        class="cancel-text"
        @click="onCancel"
      >
        取消
      </div>
    </div>
    <div>
      <van-list
        v-if="ClassList.length > 0"
        v-model="loading"
        :finished="finished"
        class="classList"
        @load="onSearch"
      >
        <signatureClass
          v-for="item in ClassList"
          :key="item.ClassId"
          :item="item"
          :fun="'isClassList'"
          :user-scholarship="userScholarship"
        />
      </van-list>
      <div
        v-if="ClassList.length <= 0 && finished"
        class="no-class"
      >
        <img
          class="no-img"
          src="~assets/class/no_data.png"
          alt="暂无相关班级"
        >
        <span class="no-text">
          暂时没有相关班级
        </span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Search } from 'vant'
export default Vue.extend({
  components: {
    'van-search': Search,
    signatureClass: () => import('components/Home/SignatureClass.vue'),
  },
  data () {
    let category = this.$store.state.category
    return {
      pageNum: 1,
      pageSize: 6,
      CategoryId: category.IsAll ? '0' : category.CategoryId,
      value: '',
      ClassList: [],
      loading: true,
      finished: false,
      userScholarship: '0.00',
      scholarFinished: false,
    }
  },
  created () {
  },
  mounted () {
    (document.querySelector('.search .van-field__control') as HTMLInputElement)!.focus()
  },
  methods: {
    // 获取奖学金详情
    getUserScholarshipDetail () {
      this.$axios({
        method: 'get',
        url: 'User/GetUserScholarship',
      }).then(res => {
        this.userScholarship = res.UserScholarship
        this.scholarFinished = true
      })
    },
    clearList () {
      this.pageNum = 1
      this.ClassList = []
      this.finished = false
    },
    onSearch () {
      this.loading = true
      this.finished = false
      this.$axios({
        url: 'course/getClassCourseListForWeb',
        data: {
          Page: this.pageNum,
          PageSize: this.pageSize,
          CategoryId: this.CategoryId,
          KeyWord: this.value,
          SearchKey: 1,
          IsRecommend: 2,
          IsBuy: 2,
          IsHaveVideoLive: 2,
          IsAudition: 2,
          IsHasOffLineClass: 2,
        },
      }).then(res => {
        this.$set(this.$data, 'ClassList',
          [...this.ClassList, ...res.ClassList])
        this.loading = false

        if (this.pageNum >= res.SumPage) {
          this.finished = true
        } else {
          this.pageNum++
        }
        console.log('搜索班级列表', res)
      })
    },
    onCancel () {
      this.$router.back()
    },
  },

})
</script>

<style lang="scss" scoped>
.page-view {
  min-height: 100%;
  background: #fff;
}
.top {
  height: 120px;
  line-height: 120px;
  color: #333333;
  display: flex;
  justify-content: center;
  .cancel-text {
    font-size: 32px;
    margin-left: 24px;
    line-height: 130px;
  }
}
.search {
  // border: 1px solid #CCCCCC;
  @include px1border(all, #CCC);
  border-radius: 32px;
  margin-top: 30px;
  width: 616px;
  height: 66px;
}
.search-icon {
  width: 32px;
  vertical-align: text-bottom;
}
  /deep/.van-search {
      padding: 14px 15px;
  }
  /deep/.van-search .van-cell {
      padding: 6px 0;
      margin: 0 4px;
    }
.classList {
  margin: 0 24px;
  padding-top: 2px;
}
.no-class {
  text-align: center;
  font-size: 36px;
  color: #666666;
  margin-top: 240px;
  .no-img {
    width: 150px;
    height: 250px;
  }
  .no-text {
    margin-top: 9px;
    display: block;
  }
}
</style>
